<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <th:block th:include="include :: footer" />
</head>
<body>
<div style="width:1200px;height:500px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6adWMU9fECMDUxPZF1CPKcr35WLi5cMw"></script>
<script>
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("dituContent");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.335524,39.957871), 18);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var point = new BMapGL.Point(116.335524,39.957871)

    const marker = new BMapGL.Marker(point);
    map.addOverlay(marker);
    const content = "国家海洋环境预报中心";
    // 创建信息窗口
    const infoWindow = new BMapGL.InfoWindow(content);
    // 添加标记点击事件监听器
    marker.addEventListener("click", () => {
        // 打开信息窗口;
        map.openInfoWindow(infoWindow, point);
    });
</script>
</html>